import React from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";

import Main from "../pages/main";
import Home from "../pages/home";
import Mall from "../pages/mall";
import User from "../pages/user";
import PageOne from "../pages/other/pageOne.js";
import PageTwo from "../pages/other/pageTwo.js";
import One from "../pages/one";

const routes = [
  {
    path: "/",
    Component: React.lazy(() => import("../pages/main")),
    children: [
      {
        path: "/",
        element: <Navigate to="home" replace />,
      },
      {
        path: "home",
        Component: React.lazy(() => import("../pages/home")),
      },
      {
        path: "mall",
        Component: React.lazy(() => import("../pages/mall")),
      },
      {
        path: "user",
        Component: React.lazy(() => import("../pages/user")),
      },
      {
        path: "other",
        children: [
          {
            path: "pageone",
            Component: React.lazy(() => import("../pages/other/pageOne.js")),
            children: [
              {
                path: "one",
                Component: React.lazy(() => import("../pages/one")),
              },
            ],
          },
          {
            path: "pageTwo",
            Component: React.lazy(() => import("../pages/other/pageTwo.js")),
          },
        ],
      },
    ],
  },
];

export default createBrowserRouter(routes);
